body{font-size: 14px;}
.box{max-width: 1600px; margin-left: auto !important;margin-right: auto !important;}
.flex-rict{display: flex; align-items: center; justify-content: flex-end;}
.flex-bect{display: flex; align-items: center; justify-content: space-between;}


#header .box{height: 80px;}
#header .item{width: 40px; height: 40px; background-color:  rgba(22, 22, 22, 0.1); border-radius: 50%; background-repeat: no-repeat; background-position: center; margin-left: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center;}


.home .box{overflow: hidden;}
.home .avatar{width: 98px; height: 98px; border-radius: 50%; margin-bottom: 29px;}
.home .my-info{font-size: 32px; color: #161616; letter-spacing: 0; line-height: 56px; font-weight: 700; font-family: HarmonyOS_Sans_Bold; margin-bottom: 34px;}
.home .my-ino-text{max-width: 800px; font-family: PingFangSC-Regular; color: #3D4A53; letter-spacing: 0; line-height: 30px; font-weight: 400; margin-bottom: 60px;}
.home .btn1,.home .btn2{border-radius: 4px; width: 138px; height: 40px; display: flex; align-items: center; justify-content: center;}
.home .btn1{background: #FFFFFF; border: 1px solid #D8D8D8; cursor:pointer;}
.home .btn2{background: #F43B00 ; border: 1px solid #F43B00; cursor:pointer; color: #fff; margin-left: 16px;}
.home .btn-icon{width: 14px; margin-right: 6px;}
.home .main1{padding-bottom: 160px; padding-top: 70px; }
.home .main2{width: 110%; display: flex; flex-wrap: wrap; margin-bottom: 100px;}
.home .main2 .item{width: 21.96%; margin: 0 1% 30px 0; font-family: HarmonyOS_Sans; font-size: 16px;}
.home .main2 .name{margin-top: 20px;}

#footer{}
#footer .box{display: flex; justify-content: space-between; align-items: stretch;}
#footer .item{width: 24%;}
#footer .title{
  font-family: HarmonyOS_Sans_Medium; margin-bottom: 6px;
  font-size: 16px;
  color: #161616;
  letter-spacing: 0;
  line-height: 1;
  font-weight: 500; padding: 16px 0;border-bottom: 2px solid #3D4A53;
}
#footer .a{
  font-family: HarmonyOS_Sans;
  font-size: 13px;
  color: #3D4A53;
  letter-spacing: 0;
  line-height: 17px;
  font-weight: 400; display: block; padding: 3px 0;
}
#footer .copy{font-family: HarmonyOS_Sans; font-size: 13px; color: rgba(61,74,83,0.5); padding: 45px 0 20px; text-align: center;}
#contactBtn{margin-right: 6px;}
.info-logo{display: inline-block; vertical-align: middle; width: 16px; margin-right: 5px;}
.home .my-info br{display: none;}
.home .main2 .item img{display: block;}
.page-btn-box{padding-top: 30px; padding-bottom: 80px;}

/* 亮主题 */
.light{background-color: #F0F0F0;}
.light .jianbian-bg{background-image: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%);}


/* 暗黑主题 */
.dark{background-color: #171A1B;}
.dark .jianbian-bg{background-image: linear-gradient(180deg, #22292E 0%, #171A1B 100%);}
.dark .logo path,.dark .info-logo path, .dark #contactBtn path{fill: #f4f4f4 !important; opacity: 1 !important;}
.dark #header .item path{fill: #95989a !important; opacity: 1 !important;}
.dark #header .item{background-color: #373c40;}
.dark .my-ino-text{color: #9EA7AE;}
.dark .my-info{color: #f4f4f4;}
.dark .btn1{background-color: #2D3237; color: #f4f4f4;}
.dark .main2 .name{color: #f4f4f4;}
.dark #footer .title{color: #f4f4f4; border-bottom-color: #9EA7AE;}
.dark #footer .a,.dark #footer .copy{color: #9EA7AE;}
.dark .btn1{border-color: #4D565F;}
.dark.detail .page-btn{background: #2D3237; border-color: #4D565F; color: #fff;}

/* 详情页 */
.detail-box img{display: block; width: 100%;}
.detail .page-btn{background: #FFFFFF; border: 1px solid #D8D8D8; border-radius: 4px; display: flex; align-items: center; justify-content: center; width: 120px; height: 40px; font-size: 13px;}
.detail .page-svg svg{width: 16px !important;}
.detail .page-btn.prev .page-svg{transform: rotate(-180deg);}
.detail .page-btn .sp{width: 16px; height: 4px;}
.detail .page-btn .jt{font-size: 20px; font-weight: bold;}
/* .light #header .lan-btn{background-image: url(../image/lan-E.svg);}
.light #header .audio-btn{background-image: url(../image/audio-j.svg);}
.light #header .primary-btn{background-image: url(../image/primary-l.svg);} */
@media screen and (max-width: 769px){
  .home .my-info{font-size: 30px; line-height: 1.5;}
  .home .my-ino-text{font-size: 13px;}
  .home .my-info br{display: block;}
  .home .main2{width: 100%; justify-content: space-between; margin-bottom: 60px;}
  .home .main2 .item{width: 49%; margin:0px 0px 20px 0;}
  .home .main2 .name{margin-top: 10px; font-size: 13px;}
  .home .my-ino-text{margin-bottom: 45px;}
  .home .main1{padding-bottom: 50px;}
  
  #footer .box{flex-wrap: wrap;}
  #footer .box .item{width: 48%; padding-top: 30px;}
  #footer .title{font-size: 14px; border-bottom-width: 1px;}
  #footer .copy{padding-top: 35px;}
  #header .item{width: 28px; height: 28px;}
  #header .item svg{width: 13px; height: 13px;}
  #logo svg{width: 18px; height: 18px;}
  #header .box{height: 44px;}
  .detail-box.box{width: 100%; max-width: 100%;}
  .page-btn-box{padding: 30px 16px 50px;}
}

@media screen and (max-width: 360px){
  .home .my-info{font-size: 0.6rem;}
}